<template>
    <div class="writeoffcode greybody">
        <!-- 头部组件 -->
        <pub-head title="核销码"></pub-head>
        <section class="main-con" v-if="info">
            <div class="code_wrap">
                <!-- <div class="title ali-c">
                    <img src="@/assets/icon-writeoffcode.png" alt="">
                    <div class="twoline flex1 flexv">
                        <p class="twoline">{{info.item_title}}</p>
                    </div>
                </div> -->
                <!-- 核销方式 0 短信串码 1 二维码 -->
                <div class="code-box" v-if="showCode">
                    <div class="qr-box"><img :src="info.qr_code" alt="" class="fill"></div>
                    <p class="tip" @click="changeCode">切换电子核销码</p>
                </div>
                <div class="code-box" v-else>
                    <p class="code">核销码：{{info.cancel_code}}</p>
					<p class="tip" @click="changeCode">切换二维码</p>
                </div>
            </div>

            <!-- <div class="guige-boxs flexv mt2">
                <p class="oneline flex"><b>规格:</b>&nbsp;&nbsp;{{info.option_title}}</p>
                <p class="noBorder flex"><b>数量:</b>&nbsp;&nbsp;{{info.total_num}}</p>
            </div> -->

            <div class="order_msg">
                <div class="msg">
                    <p><span class="label">订单编号： </span>{{info.order_no}}</p>
                    <p><span class="label">创建时间：</span>{{info.createtime}}</p>
                    <!-- <p><span class="label" >下单时间：</span>{{timeChange(info.pay_time)}}</p> -->
                    <p><span class="label">支付金额：</span>{{info.total_price}}</p>
                </div>
                <div class="msg">
                    <p><span class="label">商品数量：</span>{{info.total_num}}</p>
                    <p><span class="label">联系人：</span>{{info.consignee}}</p>
                    <p><span class="label">手机号：</span>{{info.reserved_telephone}}</p>
                    <p><span class="label">使用时间：</span>{{info.depart_date}}&nbsp;到&nbsp;{{info.valid_time}}</p>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import Vue from 'vue';
import pubHead from '@/components/head.vue'
import { writeoffCode } from '@/request/api'
import html2canvas from 'html2canvas';
import { Toast } from 'vant'; 
    export default {
        data() {
            return {
                info: null,
				showCode:true
            }
        },
        components: {
            pubHead
        },
        created() {
            this.$loading('请稍后...')
            writeoffCode({
                token:   localStorage.getItem('token'),
                order_id: this.$route.query.id
            }).then(res => {
                Toast.clear()
                if (res.code == 1) {
                    this.info = res.data;
                } else {
                    this.$tip(res.msg);
                }
            })
        },
        methods: {
            // 时间转换
            timeChange(timeinfo) {
                var date = new Date(timeinfo * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
                var D = (date.getDate() < 10 ? '0' +date.getDate() : date.getDate()) + ' ';
                var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
                var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds(); 
                return Y+M+D+h+m+s;
            },
			changeCode(){
				this.showCode = !this.showCode
			}
			
        }
    }
</script>

<style lang="less" scoped>
    .writeoffcode {
        min-height: 100vh;
        background-color: #f5f5f5;
    }
    .main-con {
        padding: .3rem;
        .code_wrap{
            padding: .3rem;
            border-radius: .12rem;
            background-color: #fff;
            position: relative;
            .title {
                padding-bottom: .3rem;
                line-height: .4rem;
                font-size: .28rem;
                border-bottom: 1px solid #ededed;
                img {
                    width: .9rem;
                    margin-right: .18rem;
                }
            }
            .qr-box {
                width: 3.2rem;
                height: 3.2rem;
                padding: .2rem;
                border: 1px solid #ededed;
                margin: .38rem auto .18rem;
            }
            .code {
                padding: .2rem 0;
                font-size: .28rem;
                text-align: center;
            }
            .tip {
                font-size: .26rem;
                color: #5CBE30;
                text-align: center;
            }
        }
        .code_wrap::before,.code_wrap::after{
            content: "";
            width: 0.6rem;
            height: 0.6rem;
            margin: auto 0;
            position: absolute;
            z-index: 1;
            top: 0;
            bottom: 0;
            border-radius: 100%;
            background-color: #f5f5f5;
        }
        .code_wrap::before{
            left: -0.3rem;
        }
        .code_wrap::after{
            right: -0.3rem;
        }
        .guige-boxs{
            padding: 0 0.3rem;
            background-color: #fff;
            border-radius: 0.2rem;
            p{
                border-bottom: 1px solid #ddd;
                font-size: 0.28rem;
                color: #333;
                line-height: 0.88rem;
            }
        }
        .order_msg {
            margin-top: .2rem;
            border-radius: .12rem;
            background-color: #fff;
            font-size: .28rem;
            line-height: 0.6rem;
            position: relative;
            .msg {
                padding: .3rem 0.2rem;
                border-bottom: 1px dashed #ededed;
                .label {
                    display: inline-block;
                    min-width: 1.8rem;
                    text-align: right;
                }
                &:last-child {
                    border-bottom: 0;
                }
            }
        }
        .order_msg::before,.order_msg::after{
            content: "";
            width: 0.6rem;
            height: 0.6rem;
            margin: auto 0;
            position: absolute;
            z-index: 1;
            top: 0;
            bottom: 0;
            border-radius: 100%;
            background-color: #f5f5f5;
        }
        .order_msg::before{
            left: -0.3rem;
        }
        .order_msg::after{
            right: -0.3rem;
        }
    }
</style>